---
layout: example.html
title: Tiles
shortdesc: Example of different tile layers rendered in Google Maps.
docs: >
  <p>
    Shows different tile layers rendered in Google Maps. Note: the
    layers are displayed in the order that you enable them.
  </p>
  <p>
    Whenever the opacity is changed on an OL3 layer, the same change
    is applied to the layer rendered by Google Maps. However, while
    Google Maps is active, all OL3 layers have their opacity set to 0.
    This means whenever the opacity is changed, OL3-Google-Maps changes
    it back to 0.
  </p>
  <p>
    To do this, we listen to the opacity:change event. This event is
    not fired if the value doesn't change. This means that setting the
    value to 0 on the OL3 layer won't work, the value should be set to
    something close to 0 instead. The slider below goes from 0.01 to 1,
    although Number.MIN_VALUE could be used instead.
  </p>
---
<div id="map" class="map"></div>
<button id="toggleOSM" title="Toggle between OL and GMaps">Toggle between OL and GMaps</button>
<div id="toggleLayers">
  <input id="toggleTileJSON" type="checkbox" name="TileJSON" value="TileJSON" />
  <label for="toggleTileJSON">TileJSON</label>
  <input id="toggleTMS" type="checkbox" name="TMS" value="TMS" />
  <label for="toggleTMS">TMS</label>
  <input id="toggleWMS" type="checkbox" name="WMS" value="WMS" />
  <label for="toggleWMS">WMS</label>
  <input id="toggleWMTS" type="checkbox" name="WMTS" value="WMTS" />
  <label for="toggleWMTS">WMTS</label>
  <input id="toggleXYZ" type="checkbox" name="XYZ" value="XYZ" />
  <label for="toggleXYZ">XYZ</label>
</div>
<div>
  <label for="opacity">Opacity: <span id="opacityValue">1</span></label>
  <input id="opacity"
         type="range"
         min="1"
         max="100"
         value="100">
</div>
